import React, { useEffect, useState } from 'react'
import { Tabs } from 'antd'
import Account from './account'
import Order from './order'
import Address from './address'
import Save from '../save'
import { Form } from 'antd'
import request from '@/utils/request'

const { TabPane } = Tabs
const paneStyle = { outline: "none", backgroundColor: "white", paddingTop: "20px" }
export default (props: any) => {
    const { match } = props
    const { params: { memberId } } = match
    const [form] = Form.useForm()
    const [memberInfo, setMemberInfo] = useState({})

    useEffect(() => {
        request(`/member/detail/${memberId}`).then((result) => {
            const data = result.data;
            if (result.code === 200) {
                setMemberInfo(data)
                if (data.avatar) {
                    data.avatar = [{
                        uid: new Date().getTime(),
                        name: data.avatar.substr(-15, 15),
                        url: data.avatar
                    }];
                } else {
                    data.avatar = [];
                }
                form.setFieldsValue({
                    username: data.username,
                    nickname: data.nickname,
                    mobile: data.mobile,
                    email: data.email,
                    enable: data.enable,
                    level_id: data.level_id,
                    sex: data.sex,
                    birthday: data.birthday,
                })
            }
        })
    }, [])
    return (
        <Tabs defaultActiveKey="1">
            <TabPane tab="基本信息" key="1" style={paneStyle}>
                <Save form={form} id={memberId} />
            </TabPane>
            <TabPane tab="账户明细" key="2" style={paneStyle}>
                <Account memberInfo={memberInfo}/>
            </TabPane>
            <TabPane tab="订单管理" key="3" style={paneStyle}>
                <Order />
            </TabPane>
            <TabPane tab="会员地址" key="4" style={{ outline: "none" }}>
                <Address />
            </TabPane>
        </Tabs >
    )
}